<template>
  <div>
    <el-button icon="el-icon-search" type="primary" @click="queryHandler" :loading="queryLoading">查询</el-button>
    <el-input
      placeholder="请输入内容"
      prefix-icon="el-icon-search"
      v-model="search">
    </el-input>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column label="ID" prop="id"/>
      <el-table-column label="名称" prop="source"/>
      <el-table-column label="内容" prop="title"/>
      <el-table-column label="时间" prop="createTime"/>
      <el-table-column
        align="right">
        <!--<template slot="header" slot-scope="scope">
          <el-button type="primary" size="small" @click="clickButton">click</el-button>
        </template>-->
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">Edit
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleView(scope.$index, scope.row)">View
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      popper-class
      layout='prev, pager, next, jumper, ->,sizes, total'
      :total="total"
      :page-size='pageSize'
      :page-sizes='pageSizes'
      :current-page="currentPage"
      @size-change="sizeChange"
      @current-change="pageChange"
      @prev-click="prevClick"
      @next-click="nextClick">
    </el-pagination>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        search: '',
        queryLoading: false,
        tableData: [],
        pageSizes: [10, 20, 30, 40, 50, 100],
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleView(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      pageQuery(currentPage, pageSize) {
        let queryParams = {
          'page': currentPage,
          'size': pageSize,
        }
        this.$request({
          url: "item/list",
          method: 'get',
          headers: {
            "Authorization": sessionStorage.getItem("Authorization")
          },
          params: queryParams
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.tableData = res.data.data.content;
            this.total = res.data.data.total;
            console.log(this.total)
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          console.error(err)
        })
      },
      sizeChange(size) {
        console.log('sizeChange', size)
        this.pageSize = size
        this.pageQuery(this.currentPage, size);
      },
      pageChange(page) {
        this.currentPage = page
        // console.log('pageChange', page)
        this.pageQuery(page, this.pageSize);
      },
      prevClick(page) {
        this.currentPage = page
        // console.log('prevClick', page)
      },
      nextClick(page) {
        this.currentPage = page
        // console.log('nextClick', page)
      },
      queryHandler() {
        this.queryLoading = true

      },
      clickButton() {
        this.$request({
          url: "item/list",
          headers: {
            "Authorization": sessionStorage.getItem("Authorization")
          }
        }).then(res => {
          console.log(res)
          if (res.data.code === 200) {
            this.tableData = res.data.data.content;
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          console.error(err)
        })
      }
    },
    created() {
      this.pageQuery(this.currentPage, this.pageSize)
    },
    mounted() {

    },
  }
</script>
